<template>
  <div>
    <div class="detail-header">
      <h1>{{ item.title }}</h1>
    </div>
    <div class="detail-nav">
      发布时间:<span>{{ item.releaseTime }}</span>
    </div>
    <div class="detail-main" v-html="item.text"></div>
    <div class="detail-main" style="margin-top: 40px">
      <h3 style="margin-bottom: 40px">附件</h3>
      <span style="margin-top: 20px"
        ><i class="el-icon-paperclip"></i>附件{{
          item.attachment ? item.attachment.length : "0"
        }}个</span
      >
      <div
        v-if="item.attachment"
        style="display: flex; flex-wrap: wrap"
        class="pointer"
      >
        <div
          style="margin-top: 30px"
          class="fujian"
          v-for="(item, index) in item.attachment"
          :key="index"
          @click="downFile(item)"
        >
          <div class="fujian-image" style="font-size: 80px">
            <i
              class="el-icon-document"
              style="font-size: 80px; margin: 10px"
            ></i>
          </div>
          <div class="fujian-right">
            <div style="height: 50%" class="downfileclassstyle">
              {{ $fileNameValidation(item) }}
            </div>
            <div style="height: 50%">
              <!-- split分隔 0表示分割前面，1分割的是后面 -->
              文件类型:{{ filetype }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { getpolicylawDetail } from "@/api/policylaw/policylaw";

export default {
  name: "policylawdetail",
  data() {
    return {
      listId: this.$route.query.listId,
      item: {},
      filetype: "",
    };
  },
  methods: {
    downFile(fileName) {
      // 下载文件
      // console.log(fileName);
      // 通过axios 接口 类型是get  url是下载文件的接口，地址需要拼接上文件名字 responseType是blob 意思是返回的二进制流
      // headers是请求头 里面有data-type和Content-Type 成功之后通过window.URL.createObjectURL创建一个url 然后创建一个a标签
      // 设置a标签的属性download为文件名字，然后点击a标签，进行下载文件
      axios({
        method: "get",
        url:
          process.env.VUE_APP_BASE_API +
          "/procurement/downloadFile?fileName=" +
          fileName,
        responseType: "blob",
        headers: {
          "data-type": "Buffer",
          "Content-Type": "application/x-www-form-urlencoded;charset",
        },
      }).then((res) => {
        // console.log(res);
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        // 这里的正则表达式匹配名字为8-4-4-4-12的uuid
        let regular =
          /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/;
        if (regular.test(fileName)) {
          fileName = fileName.slice(36);
        }
        link.setAttribute("download", fileName);
        document.body.appendChild(link);
        link.click();
      });
    },
  },
  created() {
    getpolicylawDetail({ id: this.listId }).then((res) => {
      this.item = res.data;
      this.filetype = this.item.attachment.split(".")[1];

      this.item.attachment = this.item.attachment.split(",");
      console.log(this.item.attachment, this.filetype);
    });
  },
};
</script>
<style scoped>
.detail-header h1 {
  text-align: center;
}
.detail-nav {
  margin-left: 50%;
}
.detail-main {
  padding: 0 300px;
  color: rgb(2, 12, 7);
  line-height: 20px;
  margin-bottom: 120px;
}

.fujian {
  background-color: rgb(219, 215, 215);
  width: 300px;
  height: 100px;
  margin-left: 10px;
  display: flex;
  margin-bottom: 140px;
}
.fujian-image {
  height: 90px;
  width: 70px;
  margin-right: 10px;
  text-align: center;
}
.fujian-right {
  margin: 10px;
  width: 200px;
  display: flex;
  padding: 10 0px;
  float: left;
  flex-direction: column;
  margin-top: 20px;
}
.downfileclassstyle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pointer {
  cursor: pointer;
}
</style>
